<script>
export default {
  name: 'MenuItem',
  props: {
    menu: {
      type: Object,
      default: () => ({}),
    },
  },
}
</script>

<template>
  <el-submenu v-if="menu.children" :index="menu.id">
    <template #title>
      <span>{{ menu.title }}</span>
    </template>

    <MenuItem
      v-for="item in menu.children"
      :key="item.id"
      :index="item.path"
      :menu="item"
    />
  </el-submenu>

  <el-menu-item v-else :index="menu.path">
    {{ menu.title }}
  </el-menu-item>
</template>
